
@import "./global.scss";
//引入字体图标

.container{
  width: 100vw;
  height: 100vh;

  background: url("../assets/imgaes/Background_image.jpeg") no-repeat;
  background-size: 100% 100%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  .login-container {  
  max-width: 400px;  
  padding: 50px;
  border: 1px solid #ccc;  
  border-radius: 8px;  
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);  
  background-color: #fff;
  @include background_color('bg-color');
 
  .form-group {  
    margin-bottom: 15px;  
  }  
    
  .form-group label {  
    display: block;  
    margin-bottom: 5px;  
  }  

  .login-button {  
    background-color: #42b983;

    color: white;  
    padding: 10px 20px;  
    border: none;  
    border-radius: 5px;  
    cursor: pointer;  
    transition: background-color 0.3s;  
  }  
    
  .login-button:hover {  
    background-color: #35986b;  
  }  

  /* 在Login.vue的<style>部分添加 */  
  .login-button.active {  
    transform: translateY(-4px);  
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);  
  }  
    
  /* 然后在handleLogin方法中添加一个类来触发动画（这里只是示例，因为点击是阻止表单提交的） */  

    
  /* 使用:active伪类 */  
  .login-button:active {  
    transform: translateY(2px);  
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);  
  }
}  

} 
